.animate-in,
	.animating,
    .group-animate-in {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        a {
            transition: none !important;
        }
	}

	.animate-in,
	.animate-out,
    .group-animate-in {
		visibility: hidden !important;
		opacity: 0 !important;
        will-change: transform, opacity;
        &[data-anim-type="highlight-grow"] {
            visibility: visible !important;
            opacity: 1 !important;
        }
	}

	.animating {
		-webkit-animation-duration: 0.5s !important;
		        animation-duration: 0.5s !important;
		-webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
		        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both !important;
        transform-origin: center;
	}

    .no-js .animate-in,
    .ie .animate-in,
    .no-js .group-animate-in,
    .ie .group-animate-in  {
    	visibility: visible !important;
    	opacity: 1 !important;
    }


    .pix-sliding-headline {
        opacity: 0;
        &.pix-ready {
            opacity: 1;
        }
        .slide-in-container {
            -webkit-clip-path: polygon(0 -20%, 100% -20%, 120% 120%, 0% 120%);
                    clip-path: polygon(0 -20%, 100% -20%, 120% 120%, 0% 120%);
        }
        &.animated .slide-in-container {
            overflow: visible;
        }
    }


    @-webkit-keyframes fadeInImg {
      0% {
        transform: scale(1.2);
        filter: brightness(50%);

      }
      100% {
        transform: scale(1);
        filter: brightness(100%);

      }
    }


    @keyframes fadeInImg {
      0% {
        transform: scale(1.2);
        filter: brightness(50%);

      }
      100% {
        transform: scale(1);
        filter: brightness(100%);

      }
    }
    .animating.fade-in-Img {
		-webkit-animation: 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 fadeInImg;
		        animation: 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 fadeInImg;
	}



    [data-anim-type="fade-in-up"] {
        transform: translateY(20px);
    }
    [data-anim-type="fade-in-up-big"] {
        transform: translateY(120px);
    }
    [data-anim-type="fade-in-down"] {
        transform: translateY(-20px);
    }
    [data-anim-type="fade-in-right"] {
        transform: translateX(20px);
    }
    [data-anim-type="fade-in-right-big"] {
        transform: translateX(120px);
    }
    [data-anim-type="fade-in-left"] {
        transform: translateX(-20px);
    }
    [data-anim-type="fade-in-left-big"] {
        transform: translateX(-120px);
    }

    [data-anim-type="pix-3d-in"] {
        transform: rotateX(-20deg) translateZ(200px) rotateY(-40deg) rotateZ(-20deg) scale(0.75);
    }
    [data-anim-type="pix-3d-right-in"] {
        transform: translateX(40px) translateZ(200px) rotateX(-20deg) rotateY(-40deg) rotateZ(-20deg) scale(0.75);
    }
    [data-anim-type="pix-3d-left-in"] {
        transform: translateX(-40px) translateZ(200px) rotateX(-20deg) rotateY(40deg) rotateZ(20deg) scale(0.75);
    }
    [data-anim-type="pix-3d-up-in"] {
        transform: translateY(40px) translateZ(200px) rotateX(60deg) rotateY(10deg) rotateZ(10deg) scale(0.75);
    }
    [data-anim-type="pix-3d-down-in"] {
        transform: translateY(-40px) translateZ(200px) rotateX(-60deg) rotateY(10deg) rotateZ(10deg) scale(0.75);
    }
    [data-anim-type="pix-3d-right-in-big"] {
        transform: translateX(100px) translateZ(200px) rotateX(-20deg) rotateY(-40deg) rotateZ(-20deg) scale(0.75);
    }
    [data-anim-type="pix-3d-left-in-big"] {
        transform: translateX(-100px) translateZ(200px) rotateX(-20deg) rotateY(40deg) rotateZ(20deg) scale(0.75);
    }
    [data-anim-type="pix-3d-up-in-big"] {
        transform: translateY(100px) translateZ(200px) rotateX(60deg) rotateY(10deg) rotateZ(10deg) scale(0.75);
    }
    [data-anim-type="pix-3d-down-in-big"] {
        transform: translateY(-100px) translateZ(200px) rotateX(-60deg) rotateY(10deg) rotateZ(10deg) scale(0.75);
    }
    [data-anim-type="fade-in"],
    [data-anim-type="fade-in-up"],
    [data-anim-type="fade-in-up-big"],
    [data-anim-type="fade-in-down"],
    [data-anim-type="fade-in-right"],
    [data-anim-type="fade-in-right-big"],
    [data-anim-type="fade-in-left"],
    [data-anim-type="fade-in-left-big"] {
        // will-change: transform, opacity;
        visibility: visible !important;
        transform-style: flat;
        // backface-visibility: hidden;
        &:not(.animated) {
            transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
            opacity: 0;
            // animation: none;
        }
        &.pix-animate {
            opacity: 1 !important;
            transform: none;
        }
    }
    [data-anim-type="pix-3d-in"],
    [data-anim-type="pix-3d-right-in"],
    [data-anim-type="pix-3d-left-in"],
    [data-anim-type="pix-3d-up-in"],
    [data-anim-type="pix-3d-down-in"],
    [data-anim-type="pix-3d-right-in-big"],
    [data-anim-type="pix-3d-left-in-big"],
    [data-anim-type="pix-3d-up-in-big"],
    [data-anim-type="pix-3d-down-in-big"] {
        // transition: all 0.8s cubic-bezier(0.19, 0.29, 0.32, 0.99) !important;
        // animation: none;
        visibility: visible !important;
        transform-style: flat;
        -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
        perspective: 1000;
        &:not(.animated) {
            transition-property: opacity, transform !important;
            transition-duration: 0.8s !important;
            transition-timing-function: cubic-bezier(0.19, 0.29, 0.32, 1) !important;
            will-change: transform, opacity;
            opacity: 0;
            -webkit-animation: none;
                    animation: none;
        }
        &.pix-animate {
            opacity: 1 !important;
            transform: none;
        }
    }

    [data-anim-type="pix-sliding-text"] {
        will-change: auto !important;
        &.animate-in {
            will-change: auto;
        }
        .pix-sliding-item-placeholder {
            opacity: 0;
            display: inline-block;
            pointer-events: none;
            visibility: hidden;
            padding: 10px 0;
            margin: -10px 0;
            overflow: hidden;
        }
        .pix-sliding-item {
            transition-property: transform, opacity;
            display: inline-block;
            -webkit-animation: none;
                    animation: none;
            visibility: visible !important;
            transform-style: flat;
            -webkit-backface-visibility: visible;
                    backface-visibility: visible;
            transform: translateY(1.4em);
            padding: 10px 0;
            margin: -10px 0;
            overflow: visible;
            &.text-gradient-primary {
                background-size: 200%;
                background-position: center;
                background-attachment: scroll;
            }
        }
        &:not(.animated) .pix-sliding-item {
            opacity: 0;
            transition-property: transform !important;
            transition-duration: 0.8s;
            // transition-timing-function: all 0.8s cubic-bezier(0.19, 0.29, 0.32, 0.99) !important;
            transition-timing-function: all 1.2s cubic-bezier(0.13,0.91,0.42,1);
            will-change: auto;
            // &.text-gradient-primary {
            //     transform: none;
            //     transition-property: margin-top, opacity !important;
            // }
        }
        .pix-sliding-letter.text-gradient-primary {
            background-attachment: scroll;
        }
        // &.animated .slide-in-container {
        //     // clip-path: none !important;
        //     // overflow: visible !important;
        // }
        &.pix-animate .pix-sliding-item {
            opacity: 1 !important;
            transform: none;
            &.text-gradient-primary {
                margin-top: 0;
            }
        }
        // &.animated .slide-in-container {
        //     overflow: visible;
        //     clip-path: polygon(0 -20%, 100% -20%, 120% 120%, 0% 120%);
        // }
        .slide-in-container {
            white-space: nowrap;
        }
    }

/*	#Slide In
//	================================================== */

    // Up
    @-webkit-keyframes slideInUp {
        0% {
            opacity: .2;
            transform: translateY(200%);
        }
        100% {
            transform: translateY(0%);
            opacity: 1;
        }
    }
    @keyframes slideInUp {
        0% {
            opacity: .2;
            transform: translateY(200%);
        }
        100% {
            transform: translateY(0%);
            opacity: 1;
        }
    }
    .slide-in-container {
        overflow-y: hidden;
        display: inline-block !important;
        vertical-align: middle;
        position: relative;
        padding: 0.1em;
        margin: -0.1em;
    }
    .display-1,
    .display-2,
    .display-3,
    .display-4 {
        .slide-in-container {
            line-height: 1.3em;
        }
    }
    .animating.slide-in-up {
        -webkit-animation-name: slideInUp;
        animation-name: slideInUp;
    }

    // Down
    @-webkit-keyframes pixSlideInDown {
        0% {
            opacity: .2;
            transform: translateY(-200%);
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }
    @keyframes pixSlideInDown {
        0% {
            opacity: .2;
            transform: translateY(-200%);
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }
    .animating.slide-in-down {
        -webkit-animation-name: pixSlideInDown;
        animation-name: pixSlideInDown;
    }


//	================================================== */
/*	#Hover animations
//	================================================== */
.pix-hover-item {
    &.pix-hover-left, .pix-hover-left {
        transition: padding .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        position: relative;
        display: inline-block;
        padding-left: 0px;
        &.pix-slow {
            transition: padding 0.6s cubic-bezier(0.365, 0.84, 0.44, 1);
        }
    }
    &.pix-hover-right, .pix-hover-right {
        transition: padding .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        position: relative;
        display: inline-block;
        padding-left: 0px;
        &.pix-slow {
            transition: padding 0.6s cubic-bezier(0.365, 0.84, 0.44, 1);
        }
    }
    &.pix-img-scale, .pix-img-scale {
        transition: all 1s cubic-bezier(0.365, 0.84, 0.44, 1);
        transform: scale(1);
    }
    &.pix-slide-up, .pix-slide-up {
        transition: all 0.4s cubic-bezier(0.365, 0.84, 0.44, 1);
        opacity: 0;
        transform: translateY(100%);
    }
    &.pix-fade-in, .pix-fade-in {
        transition: all 0.3s cubic-bezier(0.365, 0.84, 0.44, 1);
        opacity: 0;
    }
    &.pix-hover-colored, .pix-hover-colored {
        filter: grayscale(1);
    }

    &.pix-hover-gradient-primary, .pix-hover-gradient-primary{
        @if $middle-gradient == 'yes' {
            background: linear-gradient($gradient-direction, $gradient-primary-1, $gradient-primary-middle, $gradient-primary-2) fixed !important;
        } @else {
            background: linear-gradient($gradient-direction, $gradient-primary-1, $gradient-primary-2) fixed !important;
        }
        opacity: 0;
    }

    // Speeds
    &.pix-img-scale, .pix-img-scale,
    &.pix-slide-up, .pix-slide-up,
    &.pix-fade-in, .pix-fade-in,
    &.pix-hover-colored, .pix-hover-colored,
    &.pix-hover-gradient-primary, .pix-hover-gradient-primary,
    &.pix-hover-opacity-0, .pix-hover-opacity-0,
    &.pix-hover-opacity-2, .pix-hover-opacity-2,
    &.pix-hover-opacity-4, .pix-hover-opacity-4,
    &.pix-hover-opacity-6, .pix-hover-opacity-6,
    &.pix-hover-opacity-7, .pix-hover-opacity-7,
    &.pix-hover-opacity-8, .pix-hover-opacity-8,
    &.pix-hover-opacity-9, .pix-hover-opacity-9,
    &.pix-hover-opacity-10, .pix-hover-opacity-10 {
        transition: $transition-base;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        will-change: opacity, transform;
        &.pix-slow {
            transition: all 0.6s cubic-bezier(0.365, 0.84, 0.44, 1);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
    }

    // Hover
    &:hover {
        &.pix-hover-left, .pix-hover-left {
            padding-right: 8px;
        }
        &.pix-hover-right, .pix-hover-right {
            padding-left: 8px;
        }
        &.pix-img-scale, .pix-img-scale {
            transform: scale(1.05);
        }
        &.pix-hover-opacity-0, .pix-hover-opacity-0 {
            opacity: 0 !important;
        }
        &.pix-hover-opacity-2, .pix-hover-opacity-2 {
            opacity: 0.2 !important;
        }
        &.pix-hover-opacity-4, .pix-hover-opacity-4 {
            opacity: 0.4 !important;
        }
        &.pix-hover-opacity-6, .pix-hover-opacity-6 {
            opacity: 0.6 !important;
        }
        &.pix-hover-opacity-7, .pix-hover-opacity-7 {
            opacity: 0.7 !important;
        }
        &.pix-hover-opacity-8, .pix-hover-opacity-8 {
            opacity: 0.8 !important;
        }
        &.pix-hover-opacity-9, .pix-hover-opacity-9 {
            opacity: 0.9 !important;
        }
        &.pix-hover-opacity-10, .pix-hover-opacity-10 {
            opacity: 1 !important;
        }
        &.pix-fade-in, .pix-fade-in {
            opacity: 1;
        }
        &.pix-slide-up, .pix-slide-up {
            transform: translateY(0);
            opacity: 1;
        }
        &.pix-hover-colored, .pix-hover-colored{
            filter: grayscale(0);
        }
        &.pix-hover-gradient-primary, .pix-hover-gradient-primary{
            opacity: 1 !important;
        }
    }
}
.pix-hover-img-scale {
    &.pix-img-scale, .pix-img-scale {
        transition: all 1s cubic-bezier(0.365, 0.84, 0.44, 1);
        transform: none;
    }
    &.pix-img-scale, .pix-img-scale {
        transition: $transition-base;
        &.pix-slow {
            transition: all 0.6s cubic-bezier(0.365, 0.84, 0.44, 1);
        }
    }
    // Hover
    &:hover {
        &.pix-img-scale, .pix-img-scale {
            transform: scale(1.05);
        }
    }
}

@-webkit-keyframes spinAround {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

@keyframes spinAround {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}
.pix-icon-loading {
    -webkit-animation: spinAround 500ms infinite linear;
            animation: spinAround 500ms infinite linear;
    display: inline-block;

}